<template>
  <div>
    <h3>{{ info }}</h3>
    <form @submit.prevent="login">
      <label>用户名：</label>
      <input type="text" v-model="username" placeholder="请输入用户名">
      <label>口令：</label>
      <input type="password" v-model="password" placeholder="请输入口令">
      <button>登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      info: ''  // 用户登录失败后的提示信息
    }
  },
  methods: {
    login() {
      // 实际场景中，需要通过 axios 发送请求，调用后端接口进行登录验证
      if ( this.username == 'admin' && this.password == '123456'){
        sessionStorage.setItem('isAuth', true)
        this.info = ''
        // 如果存在查询参数
        if (this.$route.query.redirect) {
          // 获取路由?redirect=xxxx的参数
          let redirect = this.$route.query.redirect
          // 跳转到指定路由
          this.$router.replace(redirect)
        } else {
          // 否则跳转到首页
          this.$router.replace('/')
        }
      } else if ( this.username != 'admin') {
        sessionStorage.setItem('isAuth', false)
        this.usernmae = ''
        this.password = ''
        this.info = '用户名错误'
      } else {
        sessionStorage.setItem('isAuth', false)
        this.username = ''
        this.password = ''
        this.info = '口令错误'
      }
    }
  }
}
</script>